<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="utf-8"> 
        <title>新建工单</title>
        <link th:href="@{~/css/styles.css}" rel="stylesheet" />
        <link rel="stylesheet" th:href="@{~/css/innerstyle.css}">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" th:href="@{~/DataTables/datatables.min.css}"/>
        <script type="text/javascript" th:src="@{~/DataTables/datatables.min.js}"></script>
        <script type="text/javascript" th:src="@{~/Bootstrap-3-Typeahead-master/bootstrap3-typeahead.js}"></script>
        <script>
            function orderForm_submit() {
                if(confirm("确定添加？")){
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/order/add" ,//url
                        data: $('#orderForm').serialize(),
                        success: function (data) {
                            if (data.statue== "0") {
                                alert("添加成功！");
                                window.location.href ="/order/list"
                            }else if (data.statue=="3"){
                                alert(data.mes);
                            } else{
                                alert("添加失败...");
                            }
                        },
                        error : function() {
                            alert("请重新选择产品！！您选择的产品不存在");
                        }
                    });

                }
            }
        </script>
    </head>
    <body class="sb-nav-fixed">
    <div th:replace="bar::topbar"></div>
    <div id="layoutSidenav">
        <div th:replace="bar::#layoutSidenav_nav"></div>
        <div id="layoutSidenav_content">
    <div class="mainborder">

        <h1>工单详情</h1>

        <form role="form" id = "orderForm">

            <div class="form-group">
                <label for="productName"><span style="color: red;">*</span>产品名称</label>
                <input class="form-control" name="productName" autocomplete="off" placeholder="请输入产品名称" data-provide="typeahead" id="productName">
                <input type="hidden" name="workOrderId">
            </div>
                
            <div class="form-group">
                <label for="limitTime"><span style="color: red;">*</span>产品工期</label>
                <input class="form-control"  type="text" placeholder="产品工期" name="limitTime" id="limitTime">
            </div>
            <div class="form-group">
                <label for="orderNum"><span style="color: red;">*</span>订购数量</label>
                <input class="form-control" name="orderNum" type="text" placeholder="订购数量" id="orderNum">
            </div>
            <div class="form-group">
                <label for="customName"><span style="color: red;">*</span>客户名</label>
                <input class="form-control"  type="text" placeholder="客户名" name="customName" id="customName">
            </div>
            <div class="form-group">
                <label for="customPhone"><span style="color: red;">*</span>联系方式</label>
                <input class="form-control"  type="text" placeholder="联系方式" name="customPhone" id="customPhone">
            </div>
            <div class="form-group">
                <label for="workshopId"><span style="color: red;">*</span>下达车间</label>
                <select class="form-control" name="workshopId" id="workshopId">
                    <option th:value="1" th:text="1"></option>
                    <option th:value="2" th:text="2"></option>
                    <option th:value="3" th:text="3"></option>
                    <option th:value="4" th:text="4"></option>
                    <option th:value="5" th:text="5"></option>
                </select>
            </div>
            <div class="form-group">
                <label for="startDate"><span style="color: red;">*</span>开始时间</label>
                <input class="form-control" name="startDate" id="startDate" type="text" placeholder="开始时间">
                <p style="color: red">时间格式为：2000/1/1</p>
            </div>
            <div style="text-align: right;">
                <button type="button" onclick="orderForm_submit()" class="btn btn-danger" >提交工单</button>
            </div>
        </form>
        <div id="myAlert" class="alert alert-warning" style="display: none;">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <div id="alertMes"></div>
        </div>

    </div>
        </div>
    </div>

    <script>
        $("#orderNum").blur(function(){
            var num=$(this).val();
            if(!isNaN(num)){
                $("#myAlert").css("display","none")
            }else{
                $("#myAlert").css("display","")
                $("#alertMes").html("订单数量只能为数字")
                $("#orderNum").val("")
            }
        })
        $("#limitTime").blur(function(){
            var num=$(this).val();
            if(!isNaN(num)){
                $("#myAlert").css("display","none")
            }else{
                $("#myAlert").css("display","")
                $("#alertMes").html("工期只能为数字，单位为天")
                $("#limitTime").val("")
            }
        })
    </script>

    <script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                "bFilter": false,
                "bLengthChange": false,
                "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到相关数据！",
                    "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                }
            });
        } );
    </script>
    <script>
        $("#productName").typeahead({
            source: function (query, process) {
                //query是输入的值
                $.ajax({
                    type: "POST",
                    url: "/add/search",
                    dataType: "JSON",
                    data: {name: query},
                    success: function (msg) {
                        if (msg.status == 200 && msg.data) {
                            var array=[];
                            $.each(msg.data, function (index, ele) {
                                array.push(ele.productName);
                            });
                            process(array);
                        }
                    }
                })
            },
            minLength: 0,//键入字数多少开始补全
            showHintOnFocus: "true",//将显示所有匹配项
            fitToElement: true,//选项框宽度与输入框一致
            items: 'all',//下拉选项中出现条目的最大数量。也可以设置为“all”
            autoSelect: true,//允许你决定是否自动选择第一个建议
            afterSelect: function (item) {
                console.log(item);//打印对应的id
                $('#workOrderId').val(item);
            },
            delay: 500
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/js/scripts.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/assets/demo/chart-area-demo.js}"></script>
    <script th:src="@{~/assets/demo/chart-bar-demo.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
    <script th:src="@{~/js/datatables-simple-demo.js}"></script>
</body>
</html>